<template>
	<div class="optional-box-select">
		<!-- 第一行选择框 -->
		<div class="flex items-center">
			<!-- 我要买,我要卖 -->
			<div class="flex items-center border border-1px border-solid border-#E5E6EB text-#B5B5B5 rounded-10px p-2px justify-between
				mr-20px">
				<div value="buy"
					:class="{ 'w-100px': true, 'h-32px': true, 'flex': true, 'items-center': true, 'justify-center': true, 'item-after': methods === 'pay', 'cursor-pointer': true }"
					@click="changeMethods('pay')">
					我要买
				</div>
				<div value="sell"
					:class="{ 'w-100px': true, 'h-32px': true, 'flex': true, 'items-center': true, 'justify-center': true, 'item-after': methods === 'sell', 'cursor-pointer': true }"
					@click="changeMethods('sell')">
					我要卖
				</div>
			</div>
			<!-- 币种选择 -->
			<div class="flex items-center">
				<p v-for="(coin, index) in coinList" :key="index"
					class="flex items-center justify-center mr-10px text-#86909C cursor-pointer"
					@click="changeCoin(coin.id)">
					<span :class="{ 'text-#114CEE': selectedCoinId === coin.id }">
						{{
							coin.coinName
						}}
					</span>
				</p>
			</div>
		</div>
		<!-- 第二行选择框 -->
		<div class="flex items-center mt-20px select-box-2">
			<!-- 支付方式 -->
			<div class="mr-14px">
				<el-select v-model="selectedPay.name" placeholder="选择支付方式" placement="bottom-start" @change="changePay"
					:suffix-icon="CaretBottom" size="large" 
					popper-class="c2c-select-optional-popper-pay" 
					style="width: 240px">
					<el-option v-for="item in payList" :key="item.id" :label="item.name" :value="item.name">
						<div>
							<img src="/transaction/c2c/optional/pay-selected.svg" class="mr-10px" v-if="selectedPay.id === item.id"/>
							<img src="/transaction/c2c/optional/pay-select.svg" class="mr-10px" v-else/>
							<p :style="{ backgroundColor: item.color } "
							class="w-4px h-14px mr-10px"></p>
							<p class="mr-10px">{{ item.name }}</p>
						</div>
					</el-option>

				</el-select>
			</div>
			<!-- 交易金额和币种 -->
			<div
				class="flex amount-select items-center justify-between border border-1px border-solid border-#E5E6EB rounded-6px pl-10px justify-between">
				<div class="border border-1px border-r-solid border-#E5E6EB w-100px">
					<el-input placeholder="交易金额" v-model="inputPay" @change="changeInputPay">
					</el-input>
				</div>
				<div class="flex items-center justify-between ml-10px">
					<img :src="selectPayCoin.icon" alt="">
					<el-select v-model="selectPayCoin.coin" placeholder="选择币种" placement="bottom-end"
						:suffix-icon="CaretBottom" size="large" style="width: 100px"
						popper-class="c2c-select-optional-popper" @change="changePayCoin">
						<el-option v-for="item in payCoinList" :key="item.coin" :label="item.coin" :value="item.coin">
							<div>
								<div>
									<img :src="item.icon" alt="">
									<span class="text-dark-700">
										{{ item.coin }}
									</span>
								</div>
								<el-icon v-if="item.coin === selectPayCoin.coin" color="rgb(17,76,238)"><Select /></el-icon>
							</div>
						</el-option>
					</el-select>
				</div>
			</div>
			<!-- 重置 -->
			<div class="flex items-center justify-center ml-15px border border-1px border-solid border-#E5E6EB rounded-6px h-40px w-40px
				cursor-pointer">
				<img src="/transaction/c2c/optional/reset.svg">
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { CaretBottom } from '@element-plus/icons-vue';
interface Props {
	coinList: Array<any>
}
const props = defineProps<Props>()
// 购入和出售切换，币种切换
// 支付方式切换，输入金额切换，使用货币切换
const emits = defineEmits(['changeMethods', 'changeCoin', 'changePay', 'changeInputPay', 'changePayCoin'])

// 购入和出售切换
const methods = ref<'pay' | 'sell'>('pay')


// 币种切换
const selectedCoinId = ref<number>(1)


// 选中支付方式
const selectedPay = ref<any>(
	{
		id: '0',
		color: "#114CEE",
		name: "所有支付方式"
	}
)

// 所有支付方式
const payList = ref<any[]>([
	{
		id: '0',
		color: "#114CEE",
		name: "所有支付方式",
	},
	{
		id: '1',
		color: "#1187EE",
		name: "支付宝",
	},
	{
		id: '2',
		color: "#11EE45",
		name: "微信",
	},
	{
		id: '3',
		color: "#FC9559",
		name: "银行借记卡",
	}
])
// 交易金额
const inputPay = ref<string>('')

// 交易货币
const selectPayCoin = ref<any>({
	icon: '/transaction/c2c/quick/CNY.svg',
	coin: 'CNY'
})

const payCoinList = ref<any[]>([
	{
		icon: '/transaction/c2c/quick/CNY.svg',
		coin: 'CNY'
	},
	{
		icon: '/transaction/c2c/quick/VND.svg',
		coin: 'VND'
	}
])




// 购入出售切换
function changeMethods(value: 'pay' | 'sell') {
	methods.value = value
	emits('changeMethods', value);
}

// 币种切换
function changeCoin(coinId: number) {
	selectedCoinId.value = coinId
	emits('changeCoin', coinId)
}
// 支付方式切换
function changePay(name: any) {
	payList.value.forEach((item: any) => {
		if (item.name === name) {
			selectedPay.value.id = item.id;
			selectedPay.value.name = item.name;
			selectedPay.value.color = item.color;
		}
	});
	emits('changePay', selectedPay.value)
}
// 输入金额变化
function changeInputPay(val: string) {
	inputPay.value = val
	emits('changeInputPay', val)
}
// 选择交易货币
function changePayCoin(val: string) {
	payCoinList.value.forEach((item: any) => {
		if (item.coin === val) {
			selectPayCoin.value.icon = item.icon;
		}
	});
	emits('changePayCoin', selectPayCoin.value);
}

</script>
<style lang="scss" scoped>
// 下拉选择框样式

.optional-box-select {
	.item-after {
		position: relative;
		z-index: 2;
		color: #FFFFFF;

		&::after {
			content: '';
			width: 100%;
			height: 100%;
			border-radius: 8px;
			background-color: #114CEE;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

	.select-box-2 {
		::v-deep .el-select__wrapper {
			padding: 0 10px;
		}

		.amount-select {

			::v-deep .el-input,
			::v-deep .el-input__wrapper {
				border: none;
				box-shadow: none;
				/* 如果有阴影，也可以关闭 */
				padding: 0 0px;
			}

			::v-deep .el-select__wrapper {
				border: none;
				box-shadow: none;
				padding: 0 10px;
			}
		}
	}

}
</style>
